<template>

  <view class="rank feat-grid">

    <view class="rank-header fx-row-c main-bg"
          :style="{'background-image': 'url('+ ossImage('mine/star-web.png')+')'}"
    >
      <view class="rank-header-img main-bg"
            :style="{'background-image': 'url('+ ossImage('mine/left.png')+')'}"
      ></view>
      <view class="rank-header-content">
        <view class="rank-header-content-title">Top'10 {{ store.tabList[store.rankCurrent].name }}</view>
        <view>关于每一短话的自定义</view>
      </view>
      <view class="rank-header-img main-bg"
            :style="{'background-image': 'url('+ ossImage('mine/right.png')+')'}"
      ></view>
    </view>

    <view style="margin-top:-150rpx">
      <uv-tabs :list="store.tabList" bg-color="transparent"
               :active-color="color.colorE"
               :is-scroll="false"
               :inactive-color="color.colorTextB"
               v-model="store.rankCurrent" @change="tabChange">

      </uv-tabs>
    </view>

    <view class="rank-box">
      <view v-for="(item,index) in store.rankList" class="rank-box-list fx-row-b">
        <view class="rank-box-list-index">{{ index + 1 }}</view>
        <view class="script-item script-item-small">

          <view class="script-item-box fx-row-b">
            <view @click="goToDeail(item)" class="script-item-box-img main-bg" :style="{'background-image': 'url('+ item.ScriptBasic?.cover+')'}"></view>
            <view class="script-item-box-content fx-col-b">
              <view  @click="goToDeail(item)" class="script-item-box-content-title fx-row-s">
                <text class="title-name active-max com-overflow">{{ item.ScriptBasic?.title }}</text>
                <text class="title-count">{{ filterRate(item.Rate)}}</text>

                <view v-if="item?.Partying" class="script-item-label fx-row-b">
                  <view class="script-item-label-arrow"></view>
                  <text class="script-item-label-text">正在约车</text>
                </view>
              </view>
              <view class="script-item-box-content-tag fx-row-s com-overflow">
                <uv-tag v-for="itemAge in item.ScriptBasic?.age" class="mr10" size="mini" mode="dark" shape="circle" :text="itemAge" clear
                        :color="color.colorTextD" :bg-color="color.colorTextA"
                />
                <uv-tag v-for="itemTag in item.ScriptBasic?.tags" class="mr10" size="mini" mode="dark" shape="circle" :text="itemTag" clear
                        :color="color.colorTextD" :bg-color="color.colorTextA"
                />
              </view>
              <view class="script-item-box-content-author fx-row-s com-overflow">
                <view class="fx-row-s" style="align-items: end;"  @click="jump('/pagesSetting/mine/userInfo?userId='+ item.ScriptBasic.user?.id)">
                  <uv-image
                    :width = "width"
                    :height = "height"
                    shape="circle"
                    :src="item.ScriptBasic.user?.avatar"
                  ></uv-image>
                  <view class="script-item-box-content-author-text ml15">作者：{{item.ScriptBasic.user?.nickname}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view @click="handleLike(index,item)" class="rank-box-list-like">
          <view>
            <uv-icon size="40"
               :name="item.BookMarked ? 'heart-fill' : 'heart'"
               :color="item.BookMarked ? color.colorA : color.colorTextB"
            ></uv-icon></view>
          <view class="rank-box-list-like-text">收藏</view>
        </view>
      </view>

    </view>
  </view>

</template>
<script setup>
import {ref, reactive,computed} from 'vue';
import { ossImage,jump } from '@/utils/index';
import { header,color } from '@/enums/constants';
import { onReachBottom,onShow,onLoad,onHide } from "@dcloudio/uni-app";
import { mine } from '@/enums/constants';
import playApi from "@/apis/play";
import { playStore } from "@/stores";
const store = playStore();
const {width , height} = {...header.little};
import noData from '@/components/com-nodata';

const renderData = reactive({
  currentTab:0,
})


//收藏剧本
const handleAddCollectScript = (curIndex,id)=>{
  let para = {scriptId:id}
  playApi.addCollectScript(para).then(res=>{
    if(res.code == 'SUCCESS'){
      //renderData.rankList[curIndex].BookMarked = true;
      store.setRankListCollect(curIndex,true);
      uni.showToast({
        icon:'success',
        title:'收藏成功!'
      })
    }
  })
}
//取消收藏剧本
const handleCancelCollectScript = (curIndex,id)=>{
  let para = {scriptId:id}
  playApi.cancelCollectScript(para).then(res=>{
    if(res.code == 'SUCCESS'){
      store.setRankListCollect(curIndex,false);
      //renderData.rankList[curIndex].BookMarked = false;
      uni.showToast({
        icon:'success',
        title:'已取消收藏!'
      })
    }
  })
}

//跳转详情
const goToDeail = (data)=>{
  let id = data.ScriptBasic.id;
  if(data.ScriptBasic?.category=='SAME_CITY'){
    jump('/pages/play/scriptDetail2?id='+ id || "" , true)
  }else{
    jump('/pages/play/scriptDetail?id='+ id || "" , true)
  }
}


//切换榜单
const tabChange = (index)=>{
  store.clearRankList();
  store.handleGetRankList({type:'reset',index:index});
}

//切换收藏
const handleLike = (index,item)=>{
  if(store.rankList[index].BookMarked){
    handleCancelCollectScript(index,item.ScriptBasic.id);
  }else{
    handleAddCollectScript(index,item.ScriptBasic.id);
  }
}

//处理评分
const filterRate = computed(()=>{
  return (rate)=>{
    if(rate){
      return rate.toFixed(1)
    }else{
      return ''
    }
  }
})


//被动更新排行数据
onLoad(()=>{
  store.clearRankList();
  store.handleGetRankList({type:'reset',index:0});
})

onReachBottom(()=>{
  //store.handleGetRankList({type:'scroll',index:renderData.currentTab});
})


</script>

<style lang="scss" scoped>
.rank{
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 2.5rem;
  background-color: black;
  &-header{
    text-align: center;
    padding-top: 70rpx;
    padding-bottom:200rpx;
    background-color: transparent;
    &-img{
      background-color: transparent;
      width: 60rpx;
      height:100rpx;
    }
    &-content{
      min-width: 400rpx;
      @include main-text4;
      color:$main-text-b;
      &-title{
        font-family: alimama;
        color:$main-text-e;
        font-size: 50rpx;
        font-style:italic;
        font-weight: 600;
      }
    }
  }

  .script-item{
    background: transparent;
    color:$main-text-e;
    padding-left:5rpx;
    flex-grow: 1;
    .script-item-box-content{}
    .script-item-box-content-title{
      position: relative;
      .script-item-label{
        top:3rpx;
        &-arrow{border-left: 20rpx solid black;}
      }
    }
    .title-name{color:$main-text-e;@include main-text3;}
    .title-count{@include main-text3;}
    .script-item-box{flex-wrap: nowrap}
    .script-item-box-content-author{
      color:$main-text-e;
    }
    .script-item-box-content-tag{
      max-width: 395rpx;
    }
    .active-max{
      max-width:170rpx;
    }
  }
  &-box{
    @include main-line1;
    padding:0 30rpx;
    &-list{
      flex-wrap: nowrap;
      &-index{
        position: relative;
        width:50rpx;
        height: 50rpx;
        color:$main-text-e;
        text-align: center;
        &:after{
          position: absolute;
          content:"";
          height: .5px;
          width:20rpx;
          left: 50%;
          transform:translateX(-50%);
          bottom:0;
          background-color: $main-e;
        }
      }
      &-like{
        padding:0rpx 0rpx 0rpx 20rpx;
        border-left:.5px solid $main-text-b;
        text-align: center;
        &-text{color:$main-g;@include main-text4;width:70rpx;}
      }
    }
  }


}
</style>
